import { Injectable } from '@angular/core';
import type { EChartsOption } from 'echarts'; // 只导入核心类型

@Injectable({
  providedIn: 'root'
})
export class EchartsUtilService {

  constructor() { }

  getParallelogramOption(a: number, b: number, c: number, d: number): EChartsOption {
    const determinant = a * d - b * c;
    const area = Math.abs(determinant);

    const vertices = [
      [0, 0],
      [a, c],
      [a + b, c + d],
      [b, d]
    ];

    const xValues = vertices.map(v => v[0]);
    const yValues = vertices.map(v => v[1]);
    const xMin = Math.min(...xValues) - 1;
    const xMax = Math.max(...xValues) + 1;
    const yMin = Math.min(...yValues) - 1;
    const yMax = Math.max(...yValues) + 1;

    // 不依赖具体系列类型，直接用EChartsOption并通过as const断言类型
    const option: EChartsOption = {
      title: {
        text: '二阶行列式的几何意义：平行四边形面积',
        left: 'center',
        textStyle: { fontSize: 16 },
        subtextStyle: { fontSize: 14 }
      },
      xAxis: {
        type: 'value',
        min: xMin,
        max: xMax,
        axisLine: { onZero: true },
        splitLine: { show: true }
      },
      yAxis: {
        type: 'value',
        min: yMin,
        max: yMax,
        axisLine: { onZero: true },
        splitLine: { show: true }
      },
      series: [
        // 平行四边形：使用 custom 绘制（推荐）
        {
          type: 'custom',
          renderItem: (param: any, api: any) => {
            const points = [
              [0, 0],
              [a, c],
              [a + b, c + d],
              [b, d]
            ].map(pt => api.coord(pt));

            return {
              type: 'polygon',
              shape: {
                points: points
              },
              style: {
                fill: 'rgba(54, 162, 235, 0.3)',
                stroke: 'rgba(54, 162, 235, 1)',
                lineWidth: 2
              }
            };
          },
          data: [{}]
        },

        // 向量 u
        {
          type: 'line',
          data: [[0, 0], [a, c]],
          lineStyle: { color: 'red', width: 2 },
          symbol: ['none', 'arrow'] as any,
          symbolSize: [0, 10],
          label: {
            show: true,
            position: 'end' as any,
            formatter: `u=(${a},${c})`
          }
        },

        // 向量 v
        {
          type: 'line',
          data: [[0, 0], [b, d]],
          lineStyle: { color: 'green', width: 2 },
          symbol: ['none', 'arrow'] as any,
          symbolSize: [0, 10],
          label: {
            show: true,
            position: 'end' as any,
            formatter: `v=(${b},${d})`
          }
        },

        // 顶点标注
        {
          type: 'scatter',
          data: vertices,
          symbolSize: 6,
          itemStyle: { color: 'black' },
          label: {
            show: true,
            formatter: (params: any) => {
              const data = params.data as number[];
              return `(${data[0] ?? 0},${data[1] ?? 0})`;
            },
            position: 'top' as const
          }
        }
      ],
      graphic: [{
        type: 'text',
        left: 'center',
        top: 50,
        style: {
          fontSize: 14,
          fontWeight: 'bold',
          fill: 'darkblue'
        }
      }]
    };

    return option;
  }
}
